<template>
  <div class="scroll-wrap">
    <div ref="oScrollMain" class="scroll-main">
      <div class="scroll-item" v-for="(item, index) of dataList" :key="index">
        <slot name="scrollItem" :scope="item"></slot>
      </div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
const video = document.querySelector("video");

const assetURL = "frag_bunny.mp4";
// Need to be specific for Blink regarding codecs
// ./mp4info frag_bunny.mp4 | grep Codec
//  指定 SourceBuffer 要创建并添加到 MediaSource 的 MIME 类型。
const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

//	判断浏览器是否支持，并判断是否支持该类型
if ("MediaSource" in window && MediaSource.isTypeSupported(mimeCodec)) {
  //	创建并且返回一个新的 MediaSource 的空对象
  const mediaSource = new MediaSource();
  //	转base64
  video.src = URL.createObjectURL(mediaSource);

  //	监听资源加载事件
  mediaSource.addEventListener("sourceopen", sourceOpen);
} else {
  console.error("Unsupported MIME type or codec: ", mimeCodec);
}

function sourceOpen(_) {
  //console.log(this.readyState); // open
  const mediaSource = this;

  //  MediaSource 接口 addSourceBuffer() 的方法创建一个给定的 MIME 类型的新 SourceBuffer 方法，
  //  并将其添加到 MediaSource sourceBuffers 的列表中。新的 SourceBuffer 也会返回。
  //  返回一个缓冲器 表示已创建并添加到媒体源的新源缓冲区。
  ///该 SourceBuffer 接口表示要通过 MediaSource 对象传递到和 HTMLMediaElement 播放的媒体块。这可以由一个或多个媒体段组成。
  const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);


  //  发送请求给后端
  fetchAB(assetURL, function (buf) {
    //  监听是否读取完毕
    sourceBuffer.addEventListener("updateend", function (_) {
      mediaSource.endOfStream();
      video.play(); //  自动播放
      //console.log(mediaSource.readyState); // ended
    });

    //  将每一次读取到的片段都放到缓冲区  
    sourceBuffer.appendBuffer(buf);
  });
}

function fetchAB(url, cb) {
  console.log(url);
  const xhr = new XMLHttpRequest();
  xhr.open("get", url);
  //  读取二进制文件流
  xhr.responseType = "arraybuffer";
  xhr.onload = function () {
    cb(xhr.response);
  };
  xhr.send();
}
</script>

<!-- <script>
  let t = null; //  用来接收 计时器执行的
  const interval = 10;  //  10s 执行一次计时器

  export default {
    name: 'ScrollWrap',
    props: {
      dataList: { type: Array, default: () => ([]) },
      propIndex: { type: Number, default: 0 },
      propDelay: { type: Number, default: 1000 },
      buttonStatus: 'prev'  //  向前滚动
    },
    data() {
      return {
        pageIndex: this.propIndex,
        itemCount: { type: Number | String, default: 0 }
      }
    },
    watch: {  //  监听 propIndex 值的变化，判断当前是否需要进行切换
      dataList(val) {  //  监听datalist 的变化
        const len = val.length;
        
        this.itemCount = len;
        if(len > 0) {

        }
       
        //  重新渲染
        console.log('6666666');
      },
      propIndex(val) { 
        this.pageIndex = val;
        this.handleAnimation();
      },
    },
    methods: {
      //  点击上一个按钮
      handleClickPrev() {
        const oScrollMain = this.$refs.oScrollMain;
        if(this.pageIndex == 0) oScrollMain.scrollTo(0, 1000); 
      },
      //  点击下一页按钮
      handleClickNext() {

      },
      //  运动
      handleAnimation() {
        const oScrollMain = this.$refs.oScrollMain;
        const itemHeight = parseFloat(getComputedStyle(oScrollMain, null)['height']);

        //  计算数量
        const count = this.propDelay / interval;
        //  计算元素滚动的距离
        const top = oScrollMain.scrollTop;
        //  计算总长度
        const curLen = this.pageIndex * itemHeight; 
        //  记录需要滚动的长度
        const len = curLen - top;
        //  记录档期执行到了哪
        let position = 0;
        let step = 0;

        if(t) clearInterval(t);
        
        t = setInterval(() => {
          //  计算步长
          if(position % 2) {
            step = Math.ceil(len / count); //  向上取整
          } else {
            step = Math.floor(len / count); //  向下取整
          }
          
          oScrollMain.scrollBy(0, step);

          //  Math.abs 绝对值
          if(++position > count) {
            oScrollMain.scrollTo(0, curLen); //  矫正
            clearInterval(t);
            t = null;
          }
        }, interval);
      }
    }
  }
</script> -->

<style scoped>
.scroll-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.scroll-item {
  height: 100%;
  border: 1px solid red;
  box-sizing: border-box;
}

.scroll-main {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: auto;
  /* 不需要的情况隐藏滚动条 */
}
</style>